import React, { useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import { request } from "../../utils/request";
import Header from "../../components/Header";
import { ActionSheet, Button } from "antd-mobile";
import ListItem from "../../components/ListItem";
import { StarOutline } from "antd-mobile-icons";
const Detail = () => {
  const params = useParams();
  const id = params.id;

  const getDetail = async () => {
    const resp = await request.get("/actor/detail/" + id);
    console.log(resp.data.data);
  };
  useEffect(() => {
    getDetail();
  }, []);

  const location = useLocation();
  const v = location.state;
  console.log("v", v);
  const actions = [
    { text: "微信", key: "copy" },
    { text: "小红书", key: "edit" },
    { text: "QQ", key: "save" },
  ];

  const [visible, setVisible] = useState(false);

  // 方案不合理    收藏
  // const [isCollecting, setisCollecting] = useState(
  //   JSON.parse(localStorage.getItem("isCollecting")) || false
  // );
  // const handleSwitch = () => {
  //   setisCollecting(!isCollecting);
  //   localStorage.setItem("isCollecting", JSON.stringify(!isCollecting));
  // }

  const [collectList, setCollectList] = useState(
    JSON.parse(localStorage.getItem("collectList")) || []
  );

  const handleSwitch = () => {
    if (collectList.some((item) => item.id === v.id)) {
      setCollectList(collectList.filter((item) => item.id !== v.id));
      localStorage.setItem(
        "collectList",
        JSON.stringify(collectList.filter((item) => item.id !== v.id))
      );
    } else {
      setCollectList([...collectList, v]);
      localStorage.setItem('collectList', JSON.stringify([...collectList, v]))
    }
  };

  return (
    <div>
      <Header
        title="详情"
        right={<div onClick={() => setVisible(true)}>分享</div>}
      ></Header>

      <ListItem v={v}></ListItem>

      <ActionSheet
        cancelText="关闭"
        visible={visible}
        actions={actions}
        onClose={() => setVisible(false)}
      />

      <StarOutline
        style={{
          color: collectList.some((item) => item.id === v.id) ? "red" : "black",
          fontSize: 30,
        }}
        onClick={() => handleSwitch()}
      />
    </div>
  );
};

export default Detail;
